<script setup>
import {computed, onMounted, ref} from "vue";
import LoginAndRegisterCpt from "@/components/LoginRegisterCpt.vue";
import {useLoginStorage} from "@/stores/loginStorage.js";
import {AvatarDemo, SJOJLogo} from "@/model/uri.js";
import {useRoute} from "vue-router";

const loginStore = useLoginStorage();
const route = useRoute();

const firPath = computed(() => '/' + route.path.split("/")[1]);
const activeIndex = ref(firPath.value);
const avatarDemoUrl = ref(AvatarDemo);
const model = ref(false); //控制登录注册框显示
const isLogin = computed(() => loginStore.getIsLogin);

const enter = () => {
  model.value = true;
}

onMounted(() => {
  console.log('route: ', route.path);
});

</script>

<template>
  <div class="header">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        :router="true"
    >
      <div class="header-left">
        <img :src="SJOJLogo" alt="SJ-OJ" height="50px"/>
      </div>
      <el-menu-item index="/hub">首页</el-menu-item>
      <el-menu-item index="/pool">oj题库</el-menu-item>
      <el-menu-item index="/submit">提交记录</el-menu-item>
      <div class="blank" style="margin-left: 300px"/>
      <!-- 或者 index="#" -->
      <el-menu-item :index="null" v-if="!isLogin" @click="enter">登录 | 注册</el-menu-item>
      <el-menu-item :index="null" v-if="isLogin">
        <el-avatar :size="35" :src="avatarDemoUrl" alt="头像"/>
      </el-menu-item>
      <el-menu-item index="/account">个人中心</el-menu-item>
    </el-menu>
    <hr/>

    <login-and-register-cpt v-model:visible="model"/>
  </div>
</template>

<style scoped>
.header {
  min-height: 50px;
  height: 50px;
  max-height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
}

.header-left {
  width: 20%;
  max-height: 50px;
  text-align: center;
}

.el-menu-demo {
  max-height: 50px;
  width: 100%;
}

.el-menu-item {
  margin-right: 20px;
  color: grey;
}

</style>